<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../static/lib/bootstrap.min.css">
    <script src="../../static/lib/jquery-1.7.2.js"></script>
    <script src="../../static/lib/bootstrap.js"></script>

    <script src="../../static/lib/vue.js"></script>
    <script>
        $(function () {
            $('#head').load('../head.html');
            $('#username').focusout(function () {
                if($('#username').val()==null||$('#username').val()==""){
                    $('#username').next('p').text("用户名不能为空");
                }else {
                    $('#username').next('p').text(" ");
                    $.ajax({
                        //几个参数需要注意一下
                        type: "GET",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/selectbyname?username="+$('#username-').val() ,//url
                        success: function (result) {
                            //console.log(result);//打印服务端返回的数据(调试用)
                            if (result.res==1) {
                                $('#username').next('p').text("用户名可用").attr("style","color:green");
                                $('#addbtn').removeAttr("disable");
                            } else {
                                $('#username').next('p').text("用户名已注册");
                                $('#addbtn').attr("disable","disable");
                            }
                        },
                        error : function() {
                            alert("异常！");
                        }
                    });
                }
            })
            $('#password').focusout(function () {
                if($('#password').val()==null||$('#password').val()==""){
                    $('#password').next('p').text("密码不能为空");
                }else {
                    $('#password').next('p').text(" ");
                }
            });
            $('#email').focusout(function () {
                if($('#email').val()==null||$('#email').val()==""){
                    $('#email').next('p').text("邮箱不能为空");
                    $('#addbtn').removeAttr("disable");
                }else {
                    $('#email').next('p').text(" ");
                }
                var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
                if(!reg.test($('#email').val())){ //正则验证不通过，格式不对
                    $('#email').next('p').text("请输入正确的邮箱地址");
                }else {
                    $('#email').next('p').text(" ");
                    $('#addbtn').attr("disable","disable");
                }
            });
        });
        function getAllUser() {
            $('#content-right').html("").load('userlist.html');
        }
        function indexpage() {
            $('#content-right').html("<p>腾科欢迎您！</p>");
        }
        function openToAddUserModal() {
            $('#myModal3').modal('show');
        }
        function addUser() {
            if(
                $('#username').val()!=""&&
                $('#password').val()!=""&&
                $('#email').val()!=""){
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/page/admin/addUser",//url
                    data: $('#form3').serialize(),
                    success: function (result) {
                        console.log(result);//打印服务端返回的数据(调试用)
                        if(result.res==1){
                            $('#myModal3' ).modal('hide');
                            $('#msg-modal').append("<p>"+result.msg+"</p>");
                            $('#myModal4' ).modal('show');
                            var num=2;
                            var txtnum = setInterval(function () {
                                if (num==0) {
                                    $('#myModal4' ).modal('hide');
                                    clearInterval(txtnum);
                                }
                                num--;
                            },1000);
                        }
                        // vm.userList = result.data.list;
                        // vm.pageInfo=result.data;
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            }

        }
    </script>
    <style type="text/css">
        body {background-color: #F5F5F5}
        .mune {
            height: 50px;
            background: #ac2925;
        }
        .left {
            margin-left: 100px;
            margin-top: 20px;
            height: 770px;
            border-right: 2px silver solid;
        }
        .left button {
            width: 290px;
            height: 50px;
            margin:8px 0;
        }
        #content-right p {
            margin-top: 100px;
            text-align: center;
            font-size: 100px;
            font-style: italic;
            font-family: 华文行楷;
        }
        #form3 p {
            color: #ac2925;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="head"></div>
    <div class="mune"></div>
    <div class="container-fluid">
        <div class="row" id="content">
            <div class="col-sm-2 left">
                <ul id="main-nav" class="nav nav-tabs nav-stacked ">
                    <li class="active">
                        <a href="javascript:void(0); " style="background: #F5F5F5" onclick="indexpage()">
                        <i class="glyphicon glyphicon-th-large"></i>
                        首页
                        </a>
                    </li>
                    <li>
                        <a href="#systemSetting"  class="nav-header collapsed" data-toggle="collapse">
                        <i class="glyphicon glyphicon-cog"></i>
                            用户管理
                        <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                        </a>

                        <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                            <li>
                                <a href="javascript:void(0);" onclick="getAllUser()">
                                    <i class="glyphicon glyphicon-user"></i>
                                    用户列表
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" onclick="openToAddUserModal(this)">
                                    <i class="glyphicon glyphicon-th-list">
                                    </i>添加用户
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="glyphicon glyphicon-asterisk"></i>
                                    考试管理
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="glyphicon glyphicon-eye-open"></i>
                                    成绩查看
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                        <i class="glyphicon glyphicon-globe"></i>
                        用户信息修改
                        <span class="label label-warning pull-right">5</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        关于系统
                        </a>
                    </li>
                </ul>
                <!--<button class="btn btn-primary btn-lg" onclick="getAllUser()">查看用户</button>-->
                <!--<button class="btn btn-primary btn-lg">查看用户</button>-->
                <!--<button class="btn btn-primary btn-lg">查看用户</button>-->
                <!--<button class="btn btn-primary btn-lg">查看用户</button>-->
                <!--<button class="btn btn-primary btn-lg">查看用户</button>-->
                <!--<button class="btn btn-primary btn-lg">查看用户</button>-->
                <!--<button class="btn btn-primary btn-lg">查看用户</button>-->
                <!--<button class="btn btn-primary btn-lg">查看用户</button>-->
            </div>
            <div class="col-sm-9 right">
                <div id="content-right">
                    <p>腾科欢迎您！</p>

                </div>
            </div>
        </div>
    </div>
    <!--添加用户模态框-->
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改用户信息</h4>
                </div>
                <div class="modal-body">
                    <form id="form3">
                        <div class="form-group">
                            <label for="username">Name</label>
                            <input type="text"  name="name" class="form-control" id="username" placeholder="name">
                            <p>&nbsp;</p>
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="text"  name="password" class="form-control" id="password" placeholder="password">
                            <p>&nbsp;</p>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email"  name="email" class="form-control" id="email" placeholder="Email">
                            <p>&nbsp;</p>
                        </div>
                        <div class="form-group">
                            <label for="role-select">Role</label>
                            <select class="form-control" id="role-select" name="role">
                                <option value="admin">管理员</option>
                                <option value="teacher">教师</option>
                                <option value="user" selected="selected">普通用户</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>State</label>
                            <label class="radio-inline">
                                <input type="radio" name="state" id="inlineRadio2" value="1" checked="checked"> 激活
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="state" id="inlineRadio4" value="0"> 停用
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="addbtn" class="btn btn-primary" onclick="addUser()">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">消息</h4>
                </div>
                <div class="modal-body" id="msg-modal">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
</html>